<template>
  <div>树形控件的使用学习
    <!-- default-expand-all	是否默认展开所有节点 默认为 false -->
    <!-- props: 添加组件配置 可以通过他修改渲染内容的属性名-->
    <el-tree :data="treeData" default-expand-all :props="{label:'name'}">
      <!-- 使用作用域插槽 -->
      <template v-slot="{data}">
        <!-- data: 就是我们传入的 treeData数组中的数据对象-->
        {{ data.name }}
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '总裁办'
        },
        {
          name: '技术部',
          children: [
            {
              name: 'java研发部'
            },
            {
              name: '前端研发部'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>

</style>
